<template>
  <page-header-wrapper>
    <a-card>
      <div class="flex justify-between mb-4">
        <div class="flex">
          <a-input placeholder="请输入项目地址" v-model="keyWord" />
          <a-button type="primary" class="left" @click="search">查询</a-button>
        </div>
        <setDelay @update="getData" v-action:add />
      </div>
      <a-table rowKey="id" :columns="columns" :data-source="data" :scroll="{ x: 1500, y: 400 }" @change="sorterFun">
        <span slot="applyDate" slot-scope="applyDate"> {{ humanizeDate(applyDate) }}</span>
        <span slot="principal" slot-scope="principal"> {{ moneyType(principal) }}</span>
        <span slot="capital" slot-scope="capital"> {{ moneyType(capital) }}</span>
        <span slot="otherAmount" slot-scope="otherAmount"> {{ moneyType(otherAmount) }}</span>
        <span slot="approve" slot-scope="_, record">
          <delayAppr :record="record" @update="getData" />
        </span>
        <span slot="history" slot-scope="_, record">
          <DelayHistory :record="record" />
        </span>
        <span slot="operation" slot-scope="_, record">
          <setDelay :record="record" @update="getData" v-action:get />
          <!-- <a-divider type="vertical" /> -->
          <a-popconfirm title="确定删除吗" @confirm="() => onDelete(record.id)">
            <a href="javascript:;" v-action:get v-if="record.Archive == 0">删除</a>
          </a-popconfirm>
        </span>
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import { getloanDelay, deleteloanDelay } from '@/api/common'
import { rateTypes } from '@/dict'
import moment from 'moment'
const columns = [
  {
    title: '项目编号',
    dataIndex: 'projectNum',
    key: 'projectNum',
    width: 130,
    fixed: 'left'
  },
  {
    title: '项目地址',
    dataIndex: 'addr',
    key: 'addr',
    width: 110,
    fixed: 'left',
    sorter: true,
    sortDirections: ['ascend']
  },
  {
    title: '延期本金金额',
    dataIndex: 'principal',
    key: 'principal',
    width: 120,
    scopedSlots: { customRender: 'principal' },
    sorter: true,
    sortDirections: ['ascend']
  },
  {
    title: '延期资金成本',
    dataIndex: 'capital',
    key: 'capital',
    width: 120,
    scopedSlots: { customRender: 'capital' },
    sorter: true,
    sortDirections: ['ascend']
  },
  {
    title: '延期申请日期',
    dataIndex: 'applyDate',
    key: 'applyDate',
    width: 120,
    scopedSlots: { customRender: 'applyDate' },
    sorter: true,
    sortDirections: ['ascend']
  },
  {
    title: '延期时间段',
    dataIndex: 'delayDate',
    key: 'delayDate',
    width: 110,
    scopedSlots: { customRender: 'delayDate' }
  },
  {
    title: '利息利率(%)',
    dataIndex: 'delayRate',
    key: 'delayRate',
    width: 90
  },
  {
    title: '贷款限额费(%)',
    dataIndex: 'limitRate',
    key: 'limitRate',
    width: 130
  },
  {
    title: '出借人手续费(%)',
    dataIndex: 'commissionRate',
    key: 'commissionRate',
    width: 140
  },
  {
    title: '其他费用',
    dataIndex: 'otherAmount',
    key: 'otherAmount',
    width: 90,
    scopedSlots: { customRender: 'otherAmount' }
  },
  {
    title: '退出费(%)',
    dataIndex: 'exitRate',
    key: 'exitRate',
    width: 100
  },
  {
    title: '审批状态',
    dataIndex: 'approve',
    key: 'approve',
    width: 110,
    fixed: 'right',
    scopedSlots: { customRender: 'approve' },
    filters: [
      {
        text: '批准',
        value: 2
      },
      {
        text: '拒绝',
        value: 3
      },
      {
        text: '待审批',
        value: 1
      }
    ],
    filterMultiple: false
    // onFilter: (value, record) => record.approve == value
  },
  {
    title: '历史记录',
    dataIndex: 'history',
    key: 'history',
    width: 90,
    fixed: 'right',
    scopedSlots: { customRender: 'history' }
  }
  // {
  //   title: '操作',
  //   dataIndex: 'operation',
  //   key: 'operation',
  //   width: 100,
  //   fixed: 'right',
  //   scopedSlots: { customRender: 'operation' }
  // }
]
export default {
  name: 'Delay',
  data() {
    return {
      keyWord: '',
      data: [],
      columnKey: '',
      approve: '',
      sorterList: [
        { text: 'addr', value: 1 },
        { text: 'principal', value: 11 },
        { text: 'capital', value: 12 },
        { text: 'applyDate', value: 4 }
      ]
    }
  },
  components: {
    setDelay: () => import('./com/addDelay.vue'),
    delayAppr: () => import('./com/delayApprDialog.vue'),
    DelayHistory: () => import('./com/DelayHistory.vue')
  },
  computed: {
    columns() {
      if (this.$auth('busDelay.update') || this.$auth('busDelay.delete')) {
        return [
          ...columns,
          {
            title: '操作',
            dataIndex: 'operation',
            key: 'operation',
            width: 100,
            fixed: 'right',
            scopedSlots: { customRender: 'operation' }
          }
        ]
      } else {
        return columns
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    search() {
      this.getData()
    },
    sorterFun(pagination, filters, sorter) {
      // console.log(filters)
      this.approve = filters.approve?.[0] ? filters.approve?.[0] : ''
      this.columnKey = this.sorterList.find(el => el.text == sorter.columnKey)?.value
      this.getData()
    },
    async getData() {
      const form = {}
      if (this.keyWord) {
        form.keyWord = this.keyWord
      }
      if (this.columnKey) {
        form.orderType = this.columnKey
      }
      if (this.approve) {
        form.approve = this.approve
      }
      const res = await getloanDelay(form)
      this.data = res.result.data.list
      this.data.forEach(el => {
        el.delayDate =
          moment(el.delayStartDate * 1000).format('YYYY/MM/DD') +
          '-' +
          moment(el.delayEndDate * 1000).format('YYYY/MM/DD')
        var i = el.delayRateUnit
        el.delayRate = `${rateTypes.find(el => el.value == i).text} -${el.delayRate}`
      })
    },
    humanizeDate(v) {
      if (v) {
        return moment(v * 1000).format('YYYY-MM-DD') || '--'
      } else {
        return '-'
      }
    },
    moneyType(v) {
      return `${v}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    },
    async onDelete(id) {
      await deleteloanDelay(id)
      this.$message.info('已删除')
      this.getData()
    }
  }
}
</script>
<style lang="css" scoped>
.left {
  margin-left: 15px;
}
</style>
